<html>

<head>
    <title>挤痘狂魔</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

    <link rel="stylesheet" type="text/css" href="css/index.css?v=1.2">
    <link rel="stylesheet" type="text/css" href="css/animation.css?v=1.3">
    <style type="text/css">
    </style>
</head>

<body bgcolor="white">
    <div class="" id="page1">
        <div class="banner-wrap">
            <div class="banner">
                <div class="banner-text">
                    <div class="banner-text-desc">
                        <span>痘痘的编号盖上后，安记忆</span>
                        <span class="red">从小到大的顺序点开</span>
                    </div>
                    <div class="banner-text-countdown">
                        <span>还有</span> <span class="second">4</span> <span>秒，抓紧时间记忆</span>
                    </div>
                </div>
                <img src="images/cloud.png">
            </div>

        </div>

        <div class="content-wrap">
            <div class="content-background">
                <div class="girl">
                    <!-- girl face -->
                    <div class="girl-acne-wrap"></div>
                    <img src="images/girl.png" class="">
                </div>

            </div>

        </div>
    </div>

    <div id="page2" class="">
        <div class='mask'></div>
        <img src="./images/reminder.png" class="mask-img animatedLoop pulse" onclick="g.unShare();">
        <div class="banner-wrap">
            <div class="banner">
                <div class="banner-text">
                    <div class="result-text">
                        <span>挤爆了</span><span id="acneNo" class="result-no"></span><span>颗痘痘 获得称号：</span><span id="acneTitle" class="result-title"></span>

                    </div>
                    <div class="result-desc">
                        <span id='acneDesc' class="red"></span>
                    </div>
                </div>
                <img src="images/cloud.png">
            </div>
            
        </div>

        <div class="content-wrap">
            <div class="content-background">
                <div class="action">
                    <table>
                        <tr>
                            <td><img id='replay' onclick="g.restart();" src="images/replay.png" />
                            </td>
                            <td><img id='share' onclick="g.share();" src="images/share.png" />
                            </td>
                        </tr>
                    </table>
                    <div class="action-message">
                        <img src="images/message.png">
                    </div>
                    <div class="action-more">
                        <img src="images/more.png">
                    </div>
                </div>

            </div>

        </div>
    </div>

    

    <script type="text/javascript" src="js/WeixinApi.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/underscore-min.js"></script>
    <script type="text/javascript" src="js/game.min.js"></script>

    <script type="text/javascript">
    var g;

    WeixinApi.ready(function(api) {
        var obj = {};
        obj.link = "http://www.fsll.org/wx/index.html";
        obj.imgUrl = window.location.href + "images/icon.png";
        obj.title = "挤痘狂魔";
        obj.defaultTitle = "挤痘狂魔";
        obj.desc = "享受爆痘的快感，成就白金、钻石、神级称号！";
        obj.defaultDesc = "享受爆痘的快感，成就白金、钻石、神级称号！";

        //Share game to friend
        api.shareToFriend(obj, {
            async: true,
            ready: function() {
                if (g.status) {
                    //游戏结束
                    obj.title = '我挤爆了' + g.totalAcne + '颗痘痘，获得称号：' + g.remarks[g.level].title + '（LV' + g.level + '），不服来战！';
                    obj.desc = obj.defaultDesc;
                } else {
                    //游戏未结束
                    obj.title = obj.defaultTitle;
                    obj.desc = obj.defaultDesc;
                }
                this.dataLoaded(obj);
            },
            cancel: function(resp) {},
            fail: function(resp) {},
            confirm: function(resp) {},
            all: function(resp, argv) {}
        });

        //Share game on moments
        api.shareToTimeline(obj, {
            async: true,
            ready: function() {
                if (g.status) {
                    //游戏结束
                    obj.desc = '我挤爆了' + g.totalAcne + '颗痘痘，获得称号：' + g.remarks[g.level].title + '（LV' + g.level + '），不服来战！';
                } else {
                    //游戏未结束
                    obj.desc = obj.defaultTitle;
                }

                this.dataLoaded(obj);
            },
            cancel: function(resp) {},
            fail: function(resp) {},
            confirm: function(resp) {},
            all: function(resp, argv) {}
        });

        //callbackfunc();
    });

    $(function() {
        var positions = [{
            x: '30%',
            y: '50%'
        }, {
            x: '60%',
            y: '50%'
        }, {
            x: '66%',
            y: '45%'
        }, {
            x: '36%',
            y: '35%'
        }, {
            x: '16%',
            y: '59%'
        }];

        g = new GAME(positions, $('#page1'), $('#page2'));
        var acnes = g.nextLevel();
    })
    </script>


</body>

</html>
